import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
import { Row, Col, Button, Space, Tabs } from 'antd';
import { connect } from 'umi';
import { goodsType_status } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import SelectModel from '@/components/PackagingRadioModel/components/SelectModel'
const RenderTable = (props) => {
  const { list, data, setData, disabled, onChange } = props
  const getColumns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    }, {
      title: '售价',
      dataIndex: 'price',
    }, {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '移除',
          disabled: disabled,
          click: () => {
            setData(data.filter(item => {
              return item.id !== val
            }))
            onChange && onChange(data.filter(item => {
              return item.id !== val
            }))
          }
        }]
    }]
  return <Space style={{ width: '100%' }} direction={'vertical'}>
    <TableDataBlock
      columns={getColumns}
      rowKey={(record) => `${record.id}`}
      list={list}
    ></TableDataBlock>
  </Space>
}
const SettingOpeational = (props, ref) => {
  const { onChange, detail = {}, list = [], disabled = false, } = props
  useEffect(() => {
    if (list.length) {
      setData(list)
    }

  }, [list])
  const [data, setData] = useState([])
  const [visible, setVisible] = useState(false)
  const RenderTableProps = {
    data,
    setData,
    onChange,
  }
  return (
    <Row gutter={[24, 12]} >
      <Col offset={6} span={18} >
        <Button
          disabled={disabled}
          onClick={() => {
            setVisible({ show: true, details: data });
          }}
        >

          +设置商品
        </Button>
      </Col>
      {data.length > 0 && <Col offset={6} span={18}>
        <RenderTable disabled={disabled} {...RenderTableProps} list={data}></RenderTable>
      </Col>}
      {data.length > 0 && <Col offset={6} span={18} >
        商品明细：{data.map(item => {
          return item.goodsDesc
        })}
      </Col>}
      <Col offset={6} span={18} >
        <div></div>
      </Col>
      <SelectModel hasSku={'1'} onOk={(e) => {
        setData(e);
        onChange(e)
      }} visible={visible} data={detail} onClose={() => setVisible(false)}></SelectModel>
    </Row>
  )
};
export default SettingOpeational